<example name="Palette">
  <file type="html">
    <div ng-app="Example.palette" ng-strict-di ng-controller="PaletteCtrl as paletteCtrl" id="palette">
      <h4>ColorId</h4>
      <div ng-repeat="i in paletteCtrl.arr5" class="example">
        <div ng-repeat="j in paletteCtrl.arr7"
          ng-init="colorId = i * 7 + j + 1"
          ng-attr-class="ring-palette_color-{{colorId}}">
          Color {{colorId}}
        </div>
      </div>
      <h4>ToneId and BrightnessId</h4>
      <div class="example" ng-repeat="toneId in paletteCtrl.arr7">
        <div><b>Tone {{toneId}}:</b></div>
        <div ng-repeat="brightnessId in paletteCtrl.arr5"
          ng-attr-class="ring-palette_tone-{{toneId}}-{{brightnessId}}">
          Brightness {{brightnessId}}
        </div>
      </div>
    </div>
  </file>

  <file type="css">
    :global(.example) {
      margin: 4px;
    }

    :global(.example) div {
      width: 90px;
      display: inline-block;
    }
  </file>

  <file type="js">
    import angular from 'angular';
    import '@jetbrains/ring-ui/components/palette/palette.scss';

    angular.module('Example.palette', []).
      controller('PaletteCtrl', function () {
        const xrange = num => [...Array(num)].map((val, index) => index);

        this.arr5 = xrange(5);
        this.arr7 = xrange(7);
      });
  </file>
</example>
